
<div class="thumbnail">
  <img [src]="product?.img">
  <div>
    <h4 class="pull-right">${{product?.price}} </h4>
    <h4> {{product?.title}}</h4>
    <p> {{product?.desc}}</p>
  </div>
  <div>
    <p class="pull-right">{{comments?.length}}</p>
    <p>
      <app-stars [rating]="product?.rating"></app-stars>
    </p>
  </div>
</div>

<div class="thumbnail"> 
  <button class="btn btn-default btn-lg" [class.active]="isWatched"
  (click)="watchProduct()">
    {{isWatched? 'Cancel Subscribe': 'Subscribe'}}
  </button>
  <label >Last Price: ${{currentBid | number: '.2-2'}} </label>
</div>


<div class="well">

  <div>
    <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden"> Say Someting...</button>
  </div>

  <div [hidden]="isCommentHidden">
    <div><app-stars [(rating)]="newRating" [readonly]="false"></app-stars></div>
    <div>
      <textarea [(ngModel)]="newComment" cols="75" rows="5"></textarea>
    </div>
    <div>
      <button class="btn" (click)="addComment()"> Submit</button>
    </div>
  </div>




  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div class="col-md-12">
      <app-stars [rating]="comment.rating"></app-stars>
      <span>{{comment.user}}</span>
      <span class="pull-right">{{comment.timestamp}}</span>
      <p>{{comment.content}}</p>
    </div>
  </div>
</div>